react 使用react

2024-01-22 02:28| 来源: 网络整理| 查看: 265

前言：我们平时所见的打印几乎都是打印页面中看得见的页面元素，例如页面中有个表格，我们需要把它打印出来，像这种的打印。而有些时候我们需要打印的东西不想在页面中显示，点击打印的时候就可以直接跳到打印界面进行打印，那么我们该如何实现呢？

第一步：下载安装react-to-print

npm install --save react-to-print

第二步：在需要打印的页面中引入react-to-print

import ReactToPrint from 'react-to-print';

第三步：使用并配置

//需要打印的页面 import React, { useRef } from 'react'; import ReactToPrint from 'react-to-print'; import './style.less' const PrintPage = () => { const componentRef = useRef(); return ( 打印} content={() => componentRef.current} pageStye={`@page {padding-top:10px}`} //设置打印样式 copyStyles = {false} //这里是第一处设置：打印未显示元素的关键，默认情况copyStyles是为true的， //打印未显示的元素时，我们需要把它设置为false，这样打印出来的页面才不会是空白页。 /> //这里需要给打印的内容添加一个css类，类的样式如style.less文件：这里是你要打印的内容 ); };

在style.less文件中的第二处设置

.printContent{ overflow:hidden; height:0; }

不能使用display:none;进行元素的隐藏，这样打印出来的照样还是空白的。

效果如下：打印的内容是页面中不显示的，直接点击打印后就直接跳转到了打印界面。

谢谢观看！

react-to-print的具体属性请查看官方文档！react-to-print - npm

【本文地址】

公司简介

联系我们